<template>
	<view class="audio">
		
		<!-- <trade-head title="音频"></trade-head> -->
		<!-- 音频 -->
		<van-tabs v-model="active" title-class="audio-top">
		  <van-tab title="音频">
		<!-- 详情 -->		
		<view class="right-top-icon">
		<view class="right-top-icon-z">
			<image src="../icon/矩形 2.png" mode=""></image>
		</view>
		<view class="">
			<view class="right-top-text">
				课程名称名称
			</view>
			<view class="right-top-text-1">
				课程简介课程简介课程简介课程简介课程简介课程简介
			</view>
			<view class="right-top-text-2">
				主持人：名称
			</view>
			<view class="right-top-text-3">
				发布时间2020-03-04-21   30004播放
			</view>
		</view>
		
		</view>
		<!-- 音频logo -->
		<view class="audio-top-1">
			音频
		</view>
		<view class="audio-top-1">
			音频logo
		</view>
		<view class="audio-auto">
		  <view class="audio-auto-1">
			  <view class="audio-auto-2">
			  	 <image src="../icon/分组 1.png" mode=""></image>
			  </view>
			 <view class="">
			 	 相关推荐
			 </view>
			 
			   </view>
		  <view class="audio-auto-1">
		<view class="audio-auto-2">
			 <image src="../icon/分组 1.png" mode=""></image>
		  </view>
		 <view class=""> 分享</view>
		  			 </view>
		 <view class="audio-auto-1">
		 	 <view class="audio-auto-2">
			 <image src="../icon/分组 1.png" mode=""></image>
		 	</view>
		 	 <view class=""> 倍速</view>
		 	</view>
		  </view>
		  <!-- 课程详情 -->
		  <view class="audio-cur">
		  	课程详情
		  </view>
		   <view class="content">
		      <view v-if="isFold" class="text">{{text.slice(0, 70)}}...</view>
		      <view v-else class="text">{{text}}</view>
		      <view v-if="isFold" class="toggle" @click="toggleFold">查看全部></view>
		      <view v-else class="toggle" @click="toggleFold">收起</view>
		  
		  <!-- 课程寄语 -->
		<!-- <view class="audio-cur  audio-cur-1 ">
			课程寄语
		</view>
		 <view class="content">
		    <view v-if="isFold" class="text">{{text.slice(0, 70)}}...</view>
		    <view v-else class="text">{{text}}</view>
		    <view v-if="isFold" class="toggle" @click="toggleFold">查看全部></view>
		    <view v-else class="toggle" @click="toggleFold">收起</view> -->
		<!-- 精彩片段 -->
		<view class="audio-cur  audio-cur-1 ">
			精彩选段
		</view>
		 <view class="content">
		    <view v-if="isFold" class="text">{{text.slice(0, 70)}}...</view>
		    <view v-else class="text">{{text}}</view>
		
		<!-- 相关推荐 -->
		<view class="audio-cur  audio-cur-1 ">
			
			相关推荐
		</view>
		<view class="right-top-icon audio-cur-2">
		<view class="right-top-icon-z">
			<image src="../icon/矩形 2.png" mode=""></image>
		</view>
		<view class="">
			<view class="right-top-text ">
				课程名称名称
			</view>
			<view class="right-top-text-1">
				课程简介课程简介课程简介课程简介课程简介课程简介课程简介
			</view>
			<view class="right-top-text-2">
				主持人：名称
			</view>
			<view class="right-top-text-3">
				发布时间2020-03-04-21   30004播放
			</view>
			
		</view>
		  </view>
		
		<view class="right-top-icon audio-cur-2">
		<view class="right-top-icon-z">
			<image src="../icon/矩形 2.png" mode=""></image>
		</view>
		<view class="">
			<view class="right-top-text ">
				课程名称名称
			</view>
			<view class="right-top-text-1">
				课程简介课程简介课程简介课程简介课程简介课程简介课程简介
			</view>
			<view class="right-top-text-2">
				主持人：名称
			</view>
			<view class="right-top-text-3">
				发布时间2020-03-04-21   30004播放
			</view>		
		</view>
		  </view>
		  </view>	
		 </view>
		 
		 <!-- 视频 -->
		</van-tab>
		  <van-tab title="视频">
			  
		  <!-- 视频图 -->
		 <view class="audio-s">
		 	<image src="../icon/矩形 5.png" mode=""></image>
		 </view>
		
		  <view class="audio-auto">
		   <view class="audio-auto-1">
		   		<view class="audio-auto-2">
		   		 <image src="../icon/分组 1.png" mode=""></image>
		   	  </view>
			 <view class="">
  			 	 相关推荐
			</view>
		 </view>
		    <view class="audio-auto-1">
		     <view class="audio-auto-2">
		     <image src="../icon/分组 1.png" mode=""></image>
			 </view>
		<view class=""> 分享</view>
		    			 
		    </view>
		<view class="audio-auto-1">
		<view class="audio-auto-2">
			 <image src="../icon/分组 1.png" mode=""></image>
			</view>
			<view class="">
			 倍速
			</view>
					 
			 </view>
		    </view>
		    <!-- 课程详情 -->
		    <view class="audio-cur">
		    	课程详情
		    </view>
		     <view class="content">
		        <view v-if="isFold" class="text">{{text.slice(0, 70)}}...</view>
		        <view v-else class="text">{{text}}</view>
		        <view v-if="isFold" class="toggle" @click="toggleFold">查看全部></view>
		        <view v-else class="toggle" @click="toggleFold">收起</view>
		    
		    <!-- 课程寄语 -->
		  <!-- <view class="audio-cur  audio-cur-1 ">
		  	课程寄语
		  </view>
		   <view class="content">
		      <view v-if="isFold" class="text">{{text.slice(0, 70)}}...</view>
		      <view v-else class="text">{{text}}</view>
		      <view v-if="isFold" class="toggle" @click="toggleFold">查看全部></view>
		      <view v-else class="toggle" @click="toggleFold">收起</view> -->
		  <!-- 精彩片段 -->
		  <view class="audio-cur  audio-cur-1 ">
		  	精彩选段
		  </view>
		   <view class="content">
		      <view v-if="isFold" class="text">{{text.slice(0, 70)}}...</view>
		      <view v-else class="text">{{text}}</view>
		  
		  <!-- 相关推荐 -->
		  <view class="audio-cur  audio-cur-1 ">
		  	相关推荐
		  </view>
		  <view class="right-top-icon audio-cur-2">
		  <view class="right-top-icon-z">
		  	<image src="../icon/矩形 2.png" mode=""></image>
		  </view>
		  <view class="">
		  	<view class="right-top-text ">
		  		课程名称名称
		  	</view>
		  	<view class="right-top-text-1">
		  		课程简介课程简介课程简介课程简介课程简介课程简介课程简介
		  	</view>
		  	<view class="right-top-text-2">
		  		主持人：名称
		  	</view>
		  	<view class="right-top-text-3">
		  		发布时间2020-03-04-21   30004播放
		  	</view>
		  	
		  </view>
		    </view>
		  
		  <view class="right-top-icon audio-cur-2">
		  <view class="right-top-icon-z">
		  	<image src="../icon/矩形 2.png" mode=""></image>
		  </view>
		  <view class="">
		  	<view class="right-top-text ">
		  		课程名称名称
		  	</view>
		  	<view class="right-top-text-1">
		  		课程简介课程简介课程简介课程简介课程简介课程简介课程简介
		  	</view>
		  	<view class="right-top-text-2">
		  		主持人：名称
		  	</view>
		  	<view class="right-top-text-3">
		  		发布时间2020-03-04-21   30004播放
		  	</view>		
			
		  </view>
		  
		    </view> 
		    </view>		  
		   </view>
			  
		  </van-tab>
		   <view class="audio-but"> <button @click="showToast" class="audio-but-1">开通会员免费看</button> </view> 
		</van-tabs>
				
	  </view>
	  
</template>

<script>

	export default {
		 data() {
		    return {
		      isFold: true,
		      text: '这里是一段很长的文本，需要折叠显示，这里是一段很长的文本，需要折叠显示，这里是一段很长的文本，需要折叠显示,这里是一段很长的文本，需要折叠显示这里是一段很长的文本，需要折叠显示,这里是一段很长的文本，需要折叠显示'
		    }
		  },
		  methods: {
		    toggleFold() {
		      this.isFold = !this.isFold
		    },
		showToast(){
			uni.showToast({title:'开通成功', icon: 'success', duration: 2000})
		}
		
		  }
		
		}
</script>

<style lang="scss">
  
	.audio-top{
		width: 200rpx;
		background: #F7F6FB;
		padding-top: 32rpx;

		
	}
	.right-top-icon{
		display: flex;
		margin-top: 30rpx;
		
		.right-top-text{
			font-size: 35rpx;
			margin-top: 200rpx;
		}
		.right-top-text-1{
			font-size: 20rpx;
			margin-top: 20rpx;
		}
		.right-top-text-2{
		  font-size: 30rpx;
		  margin-top: 20rpx;
		}
		.right-top-text-3{
			font-size: 3rpx;
	        margin-top: 30rpx;
		}
	}
	.right-top-icon-z{
		width: 230rpx;
		height: 240rpx;
		// border: 1px solid #000;
		margin-top: 200rpx;
	}
	.right-top-icon-z image{
		width: 230rpx;
		height: 240rpx;
	}
.audio-top-1{
	
	height: 100rpx;
	// border: 1px solid #000;
	text-align: center;
	margin-top: 20rpx;
}
.audio-auto{
	display: flex;
	justify-content: space-around;
	border: 1px solid #000;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 30rpx;
}
.audio-auto-1{
	display: flex;
}
.audio-auto-1 image{
	width: 40rpx;
	height: 40rpx;
}
.audio-auto-2{
	margin-top: 10rpx;
	
}
.audio-cur{
	font-size: 40rpx;
	margin-top: 15rpx;
	color: #rgba(0, 0, 0, 1);
}

.content{
	// position: relative;
	// overflow: hidden;
	margin-top: 30rpx;
}
.text{
	line-height: 1.5;
}
.audio-cur-1{
	margin-left: -590rpx;
}
.audio-cur-2{
	margin-top: -160rpx;
}
.audio-s{
	margin-top: 230rpx;
}
.audio-s image{
	width: 100%;
}
.audio-but-1{
	height: 100rpx;
	border: 1px solid #000;
	background-color: rgba(255, 101, 61, 1);
	font-size: 32rpx;
	color: rgba(255, 255, 255, 1);
	line-height: 100rpx	;

}
</style>
